<script setup lang="ts">
import { unwrapApiBody, type ApiResponse } from '../../utils/http/factory'

definePageMeta({
  layout: 'public',
})

const route = useRoute()
const slug = computed(() => route.params.publicSlug as string)

type Payload = {
  user: { publicSlug: string | null; nickname: string | null; avatar: string | null }
  bio: { markdown: string } | null
  links: { label: string; url: string; visibility: string }[]
  posts: unknown[]
  timeline: unknown[]
  rssItems: unknown[]
}

const { data, pending, error } = await useAsyncData(
  () => `public-profile-${slug.value}`,
  async () => {
    const res = await $fetch<ApiResponse<Payload>>(`/api/public/profile/${encodeURIComponent(slug.value)}`)
    return unwrapApiBody(res)
  },
  { watch: [slug] },
)
</script>

<template>
  <UContainer class="py-10 space-y-10">
    <div v-if="pending" class="text-muted">
      加载中…
    </div>
    <UAlert v-else-if="error" color="error" title="无法加载主页" />
    <template v-else-if="data">
      <div class="flex flex-col gap-2">
        <div v-if="data.user.avatar" class="flex justify-center">
          <img
            :src="data.user.avatar"
            alt=""
            class="h-20 w-20 rounded-full object-cover border border-default"
          >
        </div>
        <h1 class="text-2xl font-semibold text-center">
          {{ data.user.nickname || data.user.publicSlug || slug }}
        </h1>
      </div>

      <div v-if="data.bio?.markdown" class="prose prose-neutral dark:prose-invert max-w-none">
        <p class="whitespace-pre-wrap">
          {{ data.bio.markdown }}
        </p>
      </div>

      <div v-if="data.links.length" class="space-y-2">
        <h2 class="text-lg font-medium">
          链接
        </h2>
        <ul class="space-y-1">
          <li v-for="(l, i) in data.links" :key="i">
            <a
              :href="l.url"
              target="_blank"
              rel="noopener noreferrer"
              class="text-primary hover:underline"
            >{{ l.label }}</a>
          </li>
        </ul>
      </div>

      <div v-if="data.posts.length" class="space-y-2">
        <h2 class="text-lg font-medium">
          文章
        </h2>
        <ul class="space-y-2">
          <li v-for="(p, i) in data.posts" :key="i" class="border border-default rounded-lg p-3">
            <div class="font-medium">
              {{ (p as { title?: string }).title }}
            </div>
            <div v-if="(p as { excerpt?: string }).excerpt" class="text-sm text-muted mt-1">
              {{ (p as { excerpt?: string }).excerpt }}
            </div>
          </li>
        </ul>
      </div>

      <div v-if="data.timeline.length" class="space-y-2">
        <h2 class="text-lg font-medium">
          时光机
        </h2>
        <ul class="space-y-2">
          <li v-for="(e, i) in data.timeline" :key="i" class="text-sm border-l-2 border-primary pl-3">
            <div class="font-medium">
              {{ (e as { title?: string }).title }}
            </div>
            <div class="text-muted">
              {{ (e as { occurredOn?: Date }).occurredOn }}
            </div>
          </li>
        </ul>
      </div>

      <div v-if="data.rssItems.length" class="space-y-2">
        <h2 class="text-lg font-medium">
          阅读
        </h2>
        <ul class="space-y-2">
          <li v-for="(it, i) in data.rssItems" :key="i">
            <a
              v-if="(it as { canonicalUrl?: string }).canonicalUrl"
              :href="(it as { canonicalUrl: string }).canonicalUrl"
              target="_blank"
              rel="noopener noreferrer"
              class="text-primary hover:underline"
            >{{ (it as { title?: string }).title || '未命名' }}</a>
          </li>
        </ul>
      </div>

      <UEmpty
        v-if="!data.posts.length && !data.timeline.length && !data.rssItems.length && !data.bio && !data.links.length"
        title="这里还没有公开内容"
        description="站主尚未发布任何公开文章或动态。"
      />
    </template>
  </UContainer>
</template>
